<template>
  <!-- 整体概况 -->
  <div class="Project-box overallOverview-box">
    <div class="ProjectTitle1 publicTiTle">整体概况</div>
    <div class="ProjectTitle2 publicETiTle">农田简介</div>
    <div class="ProjectTitle3 publicETiTle">整体占地面积</div>
    <div class="ProjectTitle4 publicTiTle">农作物产量分析</div>
    <div class="ProjectTitle5 publicETiTle">农作物总产量</div>
    <div class="ProjectTitle6 publicTiTle">近7日每日灌溉水量统计</div>
    <div class="ProjectTitle7 publicETiTle">累计灌溉水量</div>
    <div class="ProjectTitle-unit1 publicUnit">亩</div>
    <div class="ProjectTitle-unit2 publicUnit">吨</div>
    <div class="ProjectTitle-unit3 publicUnit">吨</div>
    <div class="ProjectTitleEcharts">种类占比</div>
    <div class="overallOverview-hezi1">
      农田简介介绍农田简介介绍农田简介介绍农田简介介绍农
      田简介介绍农田简介介绍......
    </div>
    <div class="overallOverview-title1">0000</div>
    <div class="overallOverview-title2">00</div>
    <div class="overallOverview-title3">00</div>
    <div class="overallOverview-hezi2">
      <pieChartEcahrts :pieChartObj="pieChartObj" />
      <div class="overallOverview-PieLender">
        <PieLender :PieLenderObj="PieLenderObj" />
      </div>
    </div>
    <div class="overallOverview-hezi3">
      <barChartEcharts :barChartList="barChartList" />
    </div>
    <div class="overallOverview-hezi4">
      <barChartEcharts :barChartList="barChartList" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsCun.vue"
import barChartEcharts from "@/components/barChartEcharts.vue"
import PieLender from "@/components/PieLender.vue"
import userStore from "@/store"
onMounted(() => {
  console.log(colorStore.colorList, "颜色")
})
const { colorStore } = userStore()
const barChartList = ref({
  xData: [
    "农作物一",
    "农作物二",
    "农作物三",
    "农作物四",
    "农作物五",
    "农作物六"
  ],
  seriesObj: {
    农作物: [10, 20, 30, 40, 50, 60]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    农作物: ["rgba(48, 228, 201,.2)", "rgba(48, 228, 201)"]
  },
  grid: {
    top: 30,
    left: 10,
    right: 10,
    bottom: 10,
    containLabel: true
  },
  provideNumber: 3, //一行展示几个字超出省略号
  danwei: "单位: 吨",
  isShowlegend: false, // 判断需不需要展示图例的布尔值
  isShowSlabel: true //轴上的label
})
const pieChartObj = ref({
  radius: ["45%", "65%"],
  center: ["25%", "50%"],
  pieChartList: [
    {
      value: 100,
      name: "农作物一"
    },
    { value: 80, name: "农作物二" },
    { value: 60, name: "农作物三" },
    { value: 60, name: "农作物四" },
    { value: 60, name: "农作物五" },
    { value: 60, name: "农作物六" },
    { value: 60, name: "农作物七" },
    { value: 60, name: "农作物八" }
  ],
  colorList: colorStore.colorList1
})
const PieLenderObj = ref({
  danwei: "亩",
  Data: [
    {
      value: 100,
      name: "农作物一"
    },
    { value: 80, name: "农作物二" },
    { value: 60, name: "农作物三" },
    { value: 60, name: "农作物四" },
    { value: 60, name: "农作物五" },
    { value: 60, name: "农作物六" },
    { value: 60, name: "农作物七" },
    { value: 60, name: "农作物八" }
  ],
  colorList: colorStore.colorList1
})
</script>
<style scoped lang="less">
.overallOverview-box {
  // background: url("@/assets/overallOverview/XXC_NTGK_1@2x.png") no-repeat center;
  background: url("@/assets/overallOverview/wuziditu.png") no-repeat center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  // background-color: pink;
  .ProjectTitle1 {
    position: absolute;
    left: 30px;
    top: 2px;
  }
  .ProjectTitle2 {
    position: absolute;
    left: 10px;
    top: 46px;
  }
  .ProjectTitle3 {
    position: absolute;
    left: 44px;
    top: 188px;
  }
  .ProjectTitle4 {
    position: absolute;
    left: 30px;
    top: 410px;
  }
  .ProjectTitle5 {
    position: absolute;
    left: 44px;
    top: 454px;
  }
  .ProjectTitle6 {
    position: absolute;
    left: 30px;
    top: 694px;
  }
  .ProjectTitle7 {
    position: absolute;
    left: 44px;
    top: 739px;
  }
  .ProjectTitle-unit1 {
    position: absolute;
    left: 330px;
    top: 188px;
  }
  .ProjectTitle-unit2 {
    position: absolute;
    left: 330px;
    top: 454px;
  }
  .ProjectTitle-unit3 {
    position: absolute;
    left: 330px;
    top: 739px;
  }
  .ProjectTitleEcharts {
    width: 36px;
    height: 36px;
    // background-color: red;
    position: absolute;
    left: 87px;
    top: 285px;
    font-size: 16px;
    color: #fff;
  }
  .overallOverview-hezi1 {
    overflow: scroll;
    box-sizing: border-box;
    position: absolute;
    left: 10.5px;
    top: 72px;
    width: 379px;
    height: 99px;
    padding: 5px;
    font-size: 14px;
    color: #f1fffb;
  }
  .overallOverview-title1 {
    // background-color: pink;
    width: 160px;
    height: 22px;
    line-height: 22px;
    text-align: right;
    position: absolute;
    top: 188px;
    right: 75px;
    color: #59f9e1;
    font-size: 22px;
  }
  .overallOverview-title2 {
    width: 160px;
    height: 22px;
    line-height: 22px;
    text-align: right;
    position: absolute;
    top: 454px;
    right: 75px;
    color: #59f9e1;
    font-size: 22px;
    // background-color: pink;
  }
  .overallOverview-title3 {
    width: 160px;
    height: 22px;
    line-height: 22px;
    text-align: right;
    position: absolute;
    top: 739px;
    right: 75px;
    color: #59f9e1;
    font-size: 22px;
    // background-color: pink;
  }
  .overallOverview-hezi2 {
    width: 379px;
    height: 170px;
    position: absolute;
    left: 10.5px;
    top: 222px;
    .overallOverview-PieLender {
      position: absolute;
      right: 15px;
      top: 10px;
      width: 170px;
      height: 150px;
    }
    // background-color: rgba(48, 80, 94, 0.5);
  }
  .overallOverview-hezi3 {
    width: 379px;
    height: 170px;
    position: absolute;
    left: 10.5px;
    top: 500px;
    // background-color: rgba(37, 95, 95, 0.5);
  }
  .overallOverview-hezi4 {
    width: 379px;
    height: 170px;
    position: absolute;
    left: 10.5px;
    top: 780px;
    // background-color: rgba(37, 95, 95, 0.5);
  }
}
</style>
